<template>
    <view class="main">
        <Empty v-if="!loadShow && !footListData.length" text="暂无足迹" />
        <view class="list-item" v-for="item in footListData" :key="item.id"
            @click="navTo(`/subPackage/index/jobDetail?id=${item.job_id}`)">
            <view class="top-info dispaly-just-between">
                <view class="title">{{ item.job_name }}</view>
                <view class="address">{{ item.city }}</view>
            </view>
            <view class="tip dispaly-center">
                <view class="tip-item" v-for="tip in item.job_desc.split(',')" :key="tip">{{ tip }}</view>
            </view>
            <view class="bottom-info dispaly-just-between">
                <view class="com-info dispaly-center">
                    <view class="com-img">
                        <image mode="aspectFill" :src="item.company_logo" />
                    </view>
                    <view class="con-name">{{ item.company_name }}</view>
                </view>
            </view>
        </view>
        <LoadMore :status="status" :show="loadShow" />
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { reactive, ref, onMounted } from 'vue';
import { getMyFoot } from '@/api/home/home'
import type { MyFootType } from '@/types/responseData'
import type { RequestMyCommentType } from '@/types/requstParm'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

let queryData = reactive<RequestMyCommentType>({
    user_id: 2,
    page: 1,
    limit: 10,
})

const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let footListData = ref<Array<MyFootType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getMyFoot(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            footListData.value = [...footListData.value, ...res.data.list]
        } else {
            loadShow.value = true
            status.value = 'nomore'
        }
    }
}


const init = () => {
    footListData.value = []
    queryData.page = 1
}

onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

onPullDownRefresh(async () => {
    uni.showLoading()
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

onMounted(() => {
    getListData()
})

</script>

<style>
page {
    background-color: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.main {
    padding: 23rpx 30rpx;
}

.list-item {
    margin-bottom: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;

    .top-info {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
        }

        .address {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #717171;
        }
    }

    .tip {
        margin: 14rpx 0;

        .tip-item:last-child {
            border-right: none;
        }

        .tip-item:first-child {
            padding-left: 0;
        }

        .tip-item {
            padding-right: 21rpx;
            padding-left: 21rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #7E7E7E;
            border-right: 1rpx solid #c1c1c1;
        }
    }

    .bottom-info {


        .com-info {
            .com-img {
                margin-right: 10rpx;

                image {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 10rpx;
                }
            }

            .con-name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
            }
        }
    }
}
</style>